<html>
<head>
<style>
#streams {
	height:100%;
	width:1000%;
}

#streams div.stream-container {
	height:100%;
	width:200px;
	float:left;
}

#streams div.stream-container img {
	width:40px;
}

#streams div.stream-container span {
	width:160px;
}

*.hidden {
	visibility:hidden;
}

</style>

<script src="http://api.feedgraph.com/js/feedgraph.js"></script>
<script src="party.js"></script>
<script src="temper.js"></script>

<script>

/* templates */
temper.include("templates/news.html");
var newsItem = temper.script("news-item");
var newsStream = temper.script("news-stream");

function makeNewsHandler(feed) {

	return function (obj) {
		addStream(feed);
		newsItem.append(feed, obj);
	}
}

function init() {

	registerNewsHandler("election", makeNewsHandler("election"));
}

function addStream(feed) {

	var container = document.getElementById("container-" + feed);
	if (container != null) {
		container.className="stream-container";
		return;
	}

	newsStream.append("streams", {"feed":feed});
}

</script>

</head>
<body onload=init()>
<div id=streams class=streams></div>
</body>
</html>
